<template>
  <div class="side-menu" :style="{width: sideWidth}">
    <div class="logo-box"><i class="el-icon-menu"></i></div>
    <el-menu default-active="receipt" router
    background-color="#334157"
    text-color="#FFF"
    active-text-color="#ffd04b"
    :collapse="isCollapse">
      <el-menu-item index="receipt">
        <i class="el-icon-box"></i>
        <template slot="title">物资接收</template>
      </el-menu-item>
      <el-menu-item index="distribution">
        <i class="el-icon-truck"></i>
        <template slot="title">物资分配</template>
      </el-menu-item>
      <el-menu-item index="donor">
        <i class="el-icon-user-solid"></i>
        <template slot="title">捐赠人信息</template>
      </el-menu-item>
      <el-menu-item index="donee">
        <i class="el-icon-user"></i>
        <template slot="title">受捐赠人信息</template>
      </el-menu-item>
      <el-menu-item index="chart">
        <i class="el-icon-pie-chart"></i>
        <template slot="title">数据可视化</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  computed: {
    sideWidth() {
      return this.isCollapse ? '70px' : '200px';
    },
    isCollapse() {
      return this.$store.state.isCollapse;
    }
  }
}
</script>

<style scoped>
.side-menu {
  position: fixed;
  top: 0;
  transition: all 0.5s;
}

.logo-box {
  font-size: 30px;
  padding: 20px;
  color: #FFF;
}

.el-menu {
  width: 100%;
  padding: 0;
  margin: 0;
  transition: all 0s;
}

.el-menu-item {
  text-align: left;
}

</style>